import React, { Component } from 'react';
import Home from './components/home';
import Header from './components/header';
import Form from './components/form';
import Calculation from './components/wendu/Calculator';

class App extends Component {
  constructor() {
    super();
    this.state = {
      homeLink: 'home',
      type:'money',
      input:''
    }
  }

  changeHomeLink(newName) {
    this.setState({
      homeLink: newName
    })
  }
  handleDate(type,e){
      if(type === 'money'){
          this.setState({type:'money',input:e.target.value});
      }else if(type === 'number'){
          this.setState({type:'number',input:e.target.value});
      }
  }
  convertNumber(input){
      return Math.floor(input/200);
  }
  convertMoney(input){
      return input * 200;
  }
  render() {
    const user = {
      name: '蘅潇嗜玉',
      remark: '这是一个react项目',
      age: 1
    }
    let input = this.state.input;
    let type = this.state.type;
    let number = type==='money'  ? inputProtected(this.convertNumber.bind(this,input)()) : input;
    let money  = type==='number' ? inputProtected(this.convertMoney.bind(this,input)()) : input;
    return (
      <div className="container">
        <Header remark={'无状态组件'} homeLink={this.state.homeLink}/>
        <Home 
          user={user}
          homeLink={this.state.homeLink}
          changeHomeLink={this.changeHomeLink.bind(this)}
        />
        <Form />
        
        {/*状态提升*/}
        <hr/>
        <div>
            <div>价格：200元一个</div>
            <Calculation data={money} title={'需要花多少钱：'} changeDate={(e)=>this.handleDate('money',e)}>
              <div>hello</div>
            </Calculation>
            <Calculation data={number} title={'买这么多个：'} changeDate={(e)=>this.handleDate('number',e)}
              left={<div>world</div>}>
            </Calculation>
        </div>
      </div>
    );
  }
}

// 
function inputProtected(input){
  if(Number.isNaN(input) || input <= 0){
      return '';
  }else{
      return Math.floor(input).toString();
  }
}

export default App;
